<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '排行榜',
	},
}
</route>

<template>
	<view class="page-ranking">
		<fly-navbar backgroundColor="transparent" textColor="#ffffff" leftText="排行榜" fixed />
		<image
			class="w-full h-full fixed top-0 left-0 z-1"
			:src="baseImg + '/class-top-bg.png'"
		></image>
		<scroll-view
			scroll-y
			class="w-full h-full absolute top-0 left-0 z-2 box-border pb-[180rpx] box-border"
			:style="{ paddingTop: barAlbright + 'rpx' }"
		>
			<view class="w-full mt-[300rpx] box-border" v-if="thisPage !== -1">
				<view class="w-full box-border">
					<block v-if="thisPage === 1">
						<view class="w-full px-[58rpx] box-border z-9">
							<view class="w-full flex h-[488rpx] relative box-border justify-center items-center">
								<image
									class="w-full h-full absolute top-0 left-0 z-2"
									:src="baseImg + '/class-prize.png'"
								></image>

								<view class="h-full absolute left-[40rpx] -top-[67rpx] z-3">
									<view
										class="flex flex-col items-center"
										v-if="showInfo.top.length >= 2 && showInfo.top[1]"
									>
										<image
											class="w-[116rpx] h-[116rpx] rounded-[50%] z-9 border-[7rpx] border-solid border-[#95ABF4]"
											:src="showInfo.top[1].avatar"
										></image>
										<image
											class="w-[123rpx] h-[172rpx] -mt-[58rpx]"
											:src="baseImg + '/class-medal-2.png'"
										></image>
										<text class="text-[#485665] text-[28rpx] text-center mt-[15rpx]">{{
											showInfo.top[1].class_name
										}}</text>
										<text class="text-[#485665] text-[18rpx] text-center">{{
											showInfo.top[1].school_name
										}}</text>
										<text class="text-[#485665] text-[39rpx] mt-[10rpx] text-center">{{
											showInfo.top[1].progress
										}}</text>
									</view>
								</view>
								<view class="h-full absolute left-[50%] -translate-x-[50%] -top-[135rpx] z-3">
									<view class="flex-1 h-full">
										<view
											class="flex flex-col items-center"
											v-if="showInfo.top.length >= 1 && showInfo.top[0]"
										>
											<image
												class="w-[127rpx] h-[127rpx] rounded-[50%] z-9 border-[7rpx] border-solid border-[#FFD427]"
												:src="showInfo.top[0].avatar"
											></image>
											<image
												class="w-[115rpx] h-[168rpx] -mt-[50rpx]"
												:src="baseImg + '/class-medal-1.png'"
											></image>
											<text class="text-[#DA9500] text-[33rpx] text-center mt-[15rpx]">{{
												showInfo.top[0].class_name
											}}</text>
											<text class="text-[#DA9500] text-[21rpx] text-center">{{
												showInfo.top[0].school_name
											}}</text>
											<text class="text-[#DA9500] text-[54rpx] font-bold mt-[18rpx] text-center">{{
												showInfo.top[0].progress
											}}</text>
										</view>
									</view>
								</view>
								<view class="h-full absolute right-[40rpx] -top-[67rpx] z-3">
									<view
										class="flex flex-col items-center"
										v-if="showInfo.top.length >= 3 && showInfo.top[2]"
									>
										<image
											class="w-[116rpx] h-[116rpx] rounded-[50%] z-9 border-[7rpx] border-solid border-[#D28052]"
											:src="showInfo.top[2].avatar"
										></image>
										<image
											class="w-[123rpx] h-[172rpx] -mt-[58rpx]"
											:src="baseImg + '/class-medal-3.png'"
										></image>
										<text class="text-[#B5531C] text-[28rpx] text-center mt-[15rpx]">{{
											showInfo.top[2].class_name
										}}</text>
										<text class="text-[#B5531C] text-[18rpx] text-center">{{
											showInfo.top[2].school_name
										}}</text>
										<text class="text-[#B5531C] text-[39rpx] mt-[10rpx] text-center">{{
											showInfo.top[2].progress
										}}</text>
									</view>
								</view>
							</view>
						</view>

						<view class="w-full -mt-[120rpx] px-[20rpx] box-border">
							<block v-if="showInfo.top.length">
								<view
									class="w-full flex justify-between items-center mb-2 ranking-item"
									v-for="(item, index) in showInfo.top.slice(0, showInfo.top.length)"
									:key="item.id"
								>
									<view
										class="text-[#303030] text-[28rpx] w-[78rpx] flex justify-center items-center pr-[30rpx] font-bold"
									>
										<text>{{ index + 1 }}</text>
									</view>
									<view class="flex-1 flex justify-between items-center box-border pr-[38rpx]">
										<view class="flex justify-between items-center">
											<image
												class="ranking-img"
												:src="item.avatar || baseImg + '/my/my-student.png'"
											></image>
											<view class="py-2 flex flex-col justify-between ml-3">
												<text class="text-[#303030] text-[28rpx]">{{ item.class_name }}</text>
												<text class="text-[24rpx] text-[#ABABAB]">{{ item.school_name }}</text>
											</view>
										</view>
										<view class="flex items-center text-[#ABABAB] text-[21rpx]"
											>完成度<text class="text-[#303030] text-[35rpx] ml-2 font-bold">{{
												item.progress
											}}</text></view
										>
									</view>
								</view>
							</block>
							<no-page v-else title="暂无数据" height="100%" type="msg"></no-page>
						</view>
					</block>
					<no-page
						v-if="thisPage === 0"
						:title="title"
						height="100%"
						:type="type"
						:btnTitle="btnTitle"
						@retry="retry"
					></no-page>
				</view>
			</view>
			<view
				v-if="thisPage === 1"
				class="w-full fixed bottom-0 left-0 h-[170rpx] flex justify-between items-center bg-white"
			>
				<view
					class="text-[#303030] text-[28rpx] w-[78rpx] flex justify-center items-center pr-[30rpx] font-bold"
				>
					<text>{{ showInfo.current_user_class_top || '-' }}</text>
				</view>
				<view class="flex-1 flex justify-between items-center box-border pr-[38rpx]">
					<view class="flex justify-between items-center">
						<image
							class="ranking-img"
							:src="userInfo.avatar || baseImg + '/my/my-student.png'"
						></image>
						<view class="py-2 flex flex-col justify-between ml-3">
							<text class="text-[#303030] text-[28rpx]">{{ userInfo.class_name }}</text>
							<text class="text-[24rpx] text-[#ABABAB]">{{ userInfo.school_name }}</text>
						</view>
					</view>
					<view
						class="flex items-center text-[#ABABAB] text-[21rpx]"
						v-if="showInfo.current_user_class_top"
						>完成度<text class="text-[#303030] text-[35rpx] ml-2 font-bold">{{
							showInfo.current_user_class_progress || 0
						}}</text></view
					>
					<text class="text-[#303030] text-[26rpx] font-bold" v-else>班级未参与</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
import { systemInfo } from '@/utils/getSystemInfo';
import { useUserStore } from '@/store';
import { storeToRefs } from 'pinia';
import { toAuthPage } from '@/utils/jump';
import { getPlanClassRecord } from '@/service/plan';
import onShare from '@/hooks/useShare';

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onShareAppMessage, onShareTimeline } = onShare();

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const { statusBarHeight, navHeight } = systemInfo();
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const barAlbright = ref(0);
const showInfo = ref({ top: [], current_user_class_top: 0, current_user_class_progress: 0 });
const thisPage = ref(-1);
const title = ref('');
const type = ref('msg');
const btnTitle = ref('重试');
const query = ref(null);

onLoad(options => {
	if (!userInfo.value.class_id) {
		// 分享或者进入未登录
		thisPage.value = 0;
		type.value = 'btn';
		title.value = '还没有登录';
		btnTitle.value = '登录';
		uni.hideShareMenu({ hideShareItems: ['qq', 'qzone'] });
		return;
	}
	if (options && options.id) {
		query.value = options;
	} else {
		type.value = 'msg';
		thisPage.value = -1;
		title.value = '暂无数据';
	}
});

onShow(() => {
	barAlbright.value = navHeight + statusBarHeight;
	if (!query.value.id) return;
	getRanking();
});

const getRanking = async () => {
	uni.showLoading({
		title: '加载中...',
	});
	try {
		const res = await getPlanClassRecord({
			id: query.value.id,
		});
		uni.hideLoading();
		if (res.status_code === 200) {
			thisPage.value = 1;
			showInfo.value = res.data;
		} else {
			uni.showToast({
				icon: 'none',
				message: res.message,
			});
			type.value = 'btn';
			thisPage.value = 0;
			showInfo.value = { top: [], current_user_class_top: 0, current_user_class_progress: 0 };
			title.value = res.message;
		}
	} catch (error) {
		showInfo.value = { top: [], current_user_class_top: 0, current_user_class_progress: 0 };
		thisPage.value = 0;
		uni.hideLoading();
		type.value = 'btn';
		uni.showToast({
			icon: 'none',
			message: '查询失败',
		});
		title.value = '查询失败';
	}
};

const retry = () => {
	if (!userInfo.value.class_id) {
		// 分享或者进入未登录
		toAuthPage({}, { type: 'switchTab', url: '/pages/index/index' });
		return;
	}
	getRanking();
};
</script>

<style lang="scss">
page {
	background: '#fff';
}
</style>
<style lang="scss" scoped>
.page-ranking {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: 100vh;
	background: '#fff';

	.ranking-img {
		width: 75rpx;
		height: 75rpx;
		background: #dbdbdb;
		border: 1rpx solid #f3f1f3;
		border-radius: 50%;
	}

	.ranking-item:last-child {
		margin-bottom: 0;
	}

	.ranking-rule {
		background: #62baf9;
	}

	.ranking-point {
		background: #f3f3f5;
	}

	.rule-modal {
		background: linear-gradient(0deg, #fff, #aac6f8);
	}

	.rule-box {
		max-height: 700rpx;
		overflow-y: auto;
		box-shadow:
			0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
			0rpx 0rpx 14rpx 0rpx rgb(0 0 0 / 7%);
	}
}
</style>
